<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{mainLayout}"
>
<head>
    <title>Home</title>
</head>
<body>

<div layout:fragment="content">
    <div class="row justify-content-md-center">

        <div class="col-md-auto col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h2>Login Form</h2>
                </div>
                <div class="card-body">
                    <div th:if="${param.error}">
                        <div class="alert alert-danger">Invalid Email and Password.</div>
                    </div>
                    <div th:if="${param.logout}">
                        <div class="alert alert-success">You have been logged out.</div>
                    </div>
                    <form id="loginForm" method="post" th:action="@{/login}" class="form-horizontal" role="form"
                          cssStyle="width: 800px; margin: 0 auto;">
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">Email*</label>
                            <div class="col-sm-10">
                                <input type="text" id="username" name="username"
                                       class="form-control" placeholder="Email"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">Password*</label>
                            <div class="col-sm-10">
                                <input type="password" id="password" name="password"
                                       class="form-control" placeholder="Password"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-4">
                                <input type="submit" class="btn btn-primary pull-right"
                                       value="Login"/>
                                <div class="clearfix"></div>
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>

    </div>

</div>

</body>
</html>
